<template>
  <div id='wrap'>
    <div id="RegisterBox">
        <div><span>账 号：</span><input type="text" placeholder="请输入手机号或邮箱" v-model="user"></div>
        <div><span>密 码：</span><input type="text" placeholder="请输入密码" v-model="pass"></div>
        <div><span>确认密码：</span><input type="text" placeholder="请确认密码" v-model="ageinpass"></div>
        <button @click="Register">注册账号</button>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'RegsisterView',
}
</script>

<script lang='ts' setup>
import router from '@/router';
import { ref } from 'vue'
import { validateEmail,validatePhone } from "@/utils/index";
const user=ref('')
const pass=ref('')
const ageinpass=ref('')
const Register=()=>{
    if(user.value=='' || pass.value=='' || ageinpass.value==''){
        alert('账号密码不能为空')
    }else if(pass.value != ageinpass.value){
        alert('两次输入的密码不一致')
    }else if(user.value==pass.value){
        alert('账号密码不能相同')
    }else if(!validateEmail(user.value) && !validatePhone(user.value)){
        alert('请输入正确的邮箱或手机号')
    }else{
        setStorage()
        alert('注册成功')
        router.push('/LoginView')
    }
}
function setStorage(){
    const arr=[]
    const obj={
        user:user.value,
        pass:pass.value
    }
    const objstr=JSON.stringify(obj)
    arr.push(objstr)
    const arrstr=arr.join('&')
    localStorage.setItem('token',arrstr)
}
</script>

<style scoped lang='scss'>
#RegisterBox{
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 30rem;
  height: auto;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  div{
    width: 100%;
    height: 4rem;
    margin-top: 5px;
    span{
      color: #7b7b7b;
      display: inline-block;
      text-align: center;
      line-height: 4rem;
      width: 10rem;
    }
    input{
      color: #7b7b7b;
      border: none;
      outline: none;
      height: 3rem;
      padding-left: 2rem;
      border-radius: 99999999px;
      width: calc(100% - 13rem);
      background-color: #f1f2f3;
    }
  }
  button{
    margin: 2rem 2rem;
  }
}
</style>
